<template>
<div>
    <el-drawer title="app授权" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="20" type="primary">
        <div class="inners" v-loading="loading">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox class="listChick" v-for="item in cities" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div class="btn">
            <el-button type="primary" size="mini" @click="saveFun()">保存</el-button>
        </div>
    </el-drawer>
</div>
</template>

<script>
import {
    appMenuAll1,
    appMenuAllById,
    authorityMenuSave
} from "@/api/Tmanager";
export default {
    data() {
        return {
            //加载
            loading: true,
            //list信息
            row: {},
            //抽屉
            drawer: false,
            direction: "rtl",
            //主要数据
            mainData: [],
            //多选
            checkAll: false,
            checkedCities: [],
            cities: [],
            isIndeterminate: true,
        };
    },
    methods: {
        //打开抽屉
        open(row) {
            //获取数据
            let token = this.$store.state.token;
            let groupId = row.id;
            this.row = row;
            this.checkedCities = [];
            this.mainData = [];
            //获取选项
            appMenuAll1().then((Response) => {
                this.mainData = Response;
                this.cities = [];
                this.mainData.forEach((val) => {
                    this.cities.push(val.title);
                });
                console.log(this.mainData);

                //获取已选权限
                appMenuAllById(token, groupId).then((Response2) => {
                    this.checkedCities = [];
                    Response2.forEach((element) => {
                        this.checkedCities.push(element.title);
                    });
                    this.loading = false;
                    console.log(this.checkedCities);
                });
            });
            this.drawer = true;
        },
        //多选
        handleCheckAllChange(val) {
            this.checkedCities = val ? this.cities : [];
            this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.cities.length;
        },
        //点击保存按钮
        saveFun() {
            console.log("保存按钮！！");
            let menuTrees = [];
            let id = this.row.id;
            for (let i = 0; i < this.mainData.length; i++) {
                for (let j = 0; j < this.checkedCities.length; j++) {
                    if (this.checkedCities[j] == this.mainData[i].title) {
                        menuTrees.push(this.mainData[i].id);
                    }
                }
            }
            console.log(menuTrees);
            authorityMenuSave(id, menuTrees).then((Response) => {
                console.log(Response);
                this.$message({
                    message: Response.message,
                    type: Response.flag ? "success" : "warning",
                });
            });
        },
        //提示
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
    },
};
</script>

<style lang="scss" scoped>
.inners {
    padding: 20px;
}

.listChick {
    display: block;
}

.el-dialog__close::before {
    color: #000 !important;
    margin: 0 auto !important;
    position: absolute !important;
    top: 26px !important;
    right: 28px !important;
}

.btn {
    padding: 0px 40px;
}
</style>
